<template>
    <div>
        <el-row>
  <el-col :span="12"><div class="grid-content bg-purple"><el-button-group>
            <el-button @click="addUI" type="success" icon="el-icon-edit">添加</el-button>
            
            </el-button-group></div></el-col>
  <el-col :span="5"><div class="grid-content bg-purple-light">
            <el-date-picker
              v-model="applyDate"
              type="date"
              placeholder="根据时间查询">
            </el-date-picker>
            </div></el-col>
  <el-col :span="7"><div class="grid-content bg-purple-light" style="float:left">
    <el-button @click="find()" type="success" icon="el-icon-search"></el-button>
  </div></el-col>
</el-row>


          <el-table   
            border
            style="width: 100%"
            :data="pagination.records"
            ref="userTable"
            >
            <el-table-column
            type="selection"
            width="55">
            </el-table-column>

            <el-table-column v-for="column in columns" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column>

            <!--操作列-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="DetailPages(scope.row)" type="success">查看详情</el-button>

                  
                    <el-button
                    size="mini" v-if="scope.row.clientState=='申请中'"
                    @click="handleEdit(scope.row)">编辑</el-button>
                    
                    
                
                  <el-button v-if="scope.row.clientState=='申请中'"
                  @click="handleDelete(scope.row)" size="mini"
                   type="danger" >删除</el-button>
              
                </template>
            </el-table-column>

        </el-table>

        <!--分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pagination.current"
            :page-sizes="[2,3,4,5]"
            :page-size="pagination.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total">
        </el-pagination>


           

          
         <!--添加-->
        <el-dialog title="添加需要申请信息" :visible.sync="addTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                    
                        <el-table
        :data="tableData"
        style="width: 100%"
        class="list-table"
        size="mini"
        border>
        <el-table-column label="客户名称" align="center" prop="materialid">
          <template slot-scope="scope">
              <el-select v-model="scope.row.clientid" placeholder="请选择">
                  <el-option
                  v-for="item in options"
                  :key="item.clientid"
                  :label="item.clientname"
                  :value="item.clientid">
                  </el-option>
                    </el-select>
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center" prop="materialid">
          <template slot-scope="scope">
              <el-select v-model="scope.row.materialid" placeholder="请选择">
                  <el-option
                  v-for="item in options2"
                  :key="item.materialid"
                  :label="item.materialname"
                  :value="item.materialid">
                  </el-option>
                    </el-select>
          </template>
        </el-table-column>
        
          <el-table-column label="数量" align="center" prop="count">
            <template slot-scope="scope">
              <el-input v-model="scope.row.count"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单价" align="center" prop="price">
            <template slot-scope="scope">
              <el-input v-model="scope.row.price"></el-input>
            </template>
          </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="addParamsSetting">新增</el-button>
            <el-button type="primary" size="small" @click.native.prevent="deleteRow(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
           
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addTag = false">取 消</el-button>
                <el-button type="primary" @click="add()">确 定</el-button>
            </div>
            </el-dialog>


            <!--详情信息-->
        <el-dialog title="客户订单详情信息" :visible.sync="DetailTag" 
        :close-on-click-modal="false" top="10px">
            <el-form label-width="100px">
                    
                    <el-row>
  <el-col :span="12" v-for="re in pagination2.records" :key="re.clientorderid" ><div style="font-size:20px;" class="grid-content bg-purple-light" v-if="reappid.clientorderid==re.clientorderid">
            申请人:{{reappid.user.realname}}

            </div></el-col>
  
 
</el-row>

                      <el-table   
            border
            style="width: 100%"
            :data="pagination2"
            ref="userTable"
            >

            <el-table-column v-for="column in columns2" :key="column.prop"
            :prop="column.prop"
            :label="column.label"
            :width="column.width">
            </el-table-column> 

             <!--自定模板-->
             <el-table-column label="总计">
                <template slot-scope="scope">
                     {{scope.row.clientprice*scope.row.clientcount}}
                </template>
             </el-table-column>
                      </el-table> 

                      <el-row>
  <el-col :span="12"  ><div style="font-size:20px;" class="grid-content bg-purple-light">
            审核人:{{clientorderid.approver}}

            </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light" style="font-size:20px;">
            总数量:{{clientorderid.clientcount}}
            </div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light" style="font-size:20px;">
            总金额:{{clientorderid.clientprice}}
            </div></el-col>
 
</el-row>
               
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DetailTag = false">返 回</el-button>
            </div>
            </el-dialog>



    </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tableData: [{
          materialid: '',
          count: '',
          price: '',
          clientid:'',
        }],
      options: [],
      options2:[],
      options3: [
        {
          value: "deliveryType1",
          label: "销售",
        },
        {
          value: "deliveryType2",
          label: "零售",
        },
      ],
      client:[],
      columns: [
        { prop: "clientorderid", label: "订单编号", width: "100" },
        { prop: "client.clientname", label: "客户名称", width: "250" },
        { prop: "clientdate", label: "订单日期", width: "100" },
        { prop: "deliverytype", label: "订单类型", width: "250" },
        { prop: "clientsumprice", label: "总金额", width: "250" },
        { prop: "clientsumcount", label: "总数量", width: "250" },
        { prop: "approver", label: "审批人", width: "250" },
        { prop: "clientstate", label: "订单状态", width: "250" },
      ],
      columns2:[
              {prop:'clientorderid',label:'订单编号',width:'100'},
              {prop:'material.materialname',label:'产品名称',width:'100'},
              {prop:'clientprice',label:'价格',width:'100'},
              {prop:'clientcount',label:'数量',width:'100'},
       ],
      pagination: {},
      pagination2: {},
      clientOrder: {},
      addTag: false,
      DetailTag:false,
      name: "",
      updateTag: false,
      clientorderid:[],
    };
  },
  created() {
    this.find();
  },
  methods: {
    addList () {
      this.tableData.push({
        materialid: '',
        count: '',
        price: '',
        clientid:'',
      })
    },
    find(page = 1, size = 3) {
      let url = "/OrderDetails/selectClientOrder";
      let params = new URLSearchParams();
      params.append("current", page);
      params.append("size", size);
      this.$axios.post(url, params).then((resp) => {
        this.pagination = resp.data;
      });
    },
    // 新增行
    addParamsSetting () {
      this.addList()
    },
    // 删除当前行
    deleteRow (index) {
      this.tableData.splice(index, 1)
    },
    //删除
    handleDelete(row) {
      //异步删除
      console.log(row.clientid);
      var url = "clientOrder/delectClientOrder";
      var params = new URLSearchParams();
      params.append("id", row.clientorderid);
      this.$axios.post(url, params).then((resp) => {
        this.$message({
          message: "删除成功:" + row.clientorderid,
        });
      });
      this.find();
    },
    //修改
    handleEdit(row) {
      this.updateTag = true;
      this.clientOrder = row;
      console.log(row);
    },
    handleSizeChange(size) {
      this.find(this.pagination.current, size);
    },
    handleCurrentChange(page) {
      this.find(page, this.pagination.size);
    },
    addUI() {
      let url = "/clientOrder/clientOrders";
      this.$axios.post(url).then(resp=>{
      this.addTag = true;
      this.options=resp.data.client;
      this.options2=resp.data.material;
        console.log(this.clientOrders);
      })
    },
    add() {
      var url = "/OrderDetails/insertDetails";
      this.$axios.post(url, this.tableData).then((resp) => {
        this.addTag = false;
        this.clientOrder = {};
        this.$message({
          message: "添加成功",
          type: "success",
        });
      });
      this.find();
    },
    update() {
      var url = "/client/updateClientOrder";
      this.$axios.post(url, this.clientOrder).then((resp) => {
        this.client = {};
        this.updateTag = false;
        this.$message({
          message: "修改成功",
          type: "success",
        });
      });
    },
    DetailPages(row){
    console.log(row.clientorderid+"搜索");
    let url = "/OrderDetails/selectDetails";
    let params = new URLSearchParams();
    params.append("clientorderid",row.clientorderid);
    this.$axios.post(url,params).then(resp=>{
            console.log(resp.data);
            this.pagination2=resp.data;
            this.DetailTag=true;
    });
  },
  },
    mounted() {
        this.find();
    },
};
</script>

<style  scoped>
.avatar-uploader-icon,
.avatar {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon:hover,
.avatar:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>